<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>

	<head>
		<title>用户</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="" />

		<!--<style>
			body {
				background: url(img/3.gif) no-repeat;
				width: 100%;
				height: 100%;
				background-size: cover;
				opacity: 0.8;
			}
			
			form {
				font-family: "楷体";
				font-size: 18px;
				line-height: 12px;
				font-weight: 2px;
				letter-spacing: 4px;
			}
			
			h1 {
				font-family: "楷体";
				line-height: 12px;
				font-weight: 2px;
				letter-spacing: 4px;
			}
			
		</style>-->
		<style type="text/css">
			#imgPreview {
				width: 40%;
				height: 30px;
				margin: 10px auto 0px auto;
				border: 1px solid white;
				text-align: center;
			}
			
			#prompt3 {
				width: 100%;
				height: 180px;
				text-align: center;
				border: 1px solid white;
				position: relative;
			}
			
			#imgSpan {
				position: absolute;
				top: 2px;
				left: 2px;
			}
			
			.filepath {
				width: 50%;
				height: 50%;
				opacity: 0;
			}
			
			#img3 {
				height: 80px;
				width: 80px;
				display: none;
			}
		</style>

	</head>

	<body>
		<h1 align="center">欢迎来到修改界面</h1>
		<hr />

		<form action="/certificate/updateEnd.do" name="form1" method="get" style="text-align: center; color:black">
			<table align="center" bgcolor=aliceblue>
				<h2>修改个人信息</h2>
				<tr>
					<td>信息编号:</td>
					<td><input type="text" class="n" name="infoId" id="infoName" placeholder="请输入您的信息编号" value="${certificate.infoId}" readonly="readonly" /></td>

				</tr>
				<tr>
					<td>证书编号:</td>
					<td><input type="text" class="n" name="infoCertificateId" id="infoCertificateId" placeholder="请输入您的证书编号" value="${certificate.infoCertificateId}" readonly="readonly" /></td>

				</tr>
				<tr>
					<td>证书类型编号:</td>
					<td><input type="text" class="n" name="infoCertificateTypeId" id="infoCertificateTypeId" placeholder="请输入您的真实姓名" value="${certificate.infoCertificateTypeId}" readonly="readonly" /></td>

				</tr>
				<tr>
					<td>姓名:</td>
					<td><input type="text" class="n" name="infoName" id="infoName" placeholder="请输入您的真实姓名" value="${certificate.infoName}" placeholder="请输入您的是否通过" readonly="readonly"/></td>

				</tr>

				<tr>
					<td>性别:</td>
					<td>男<input type="radio" name="infoSex" value="${certificate.infoSex}" checked  readonly="readonly"/> 女
						<input type="radio" name="infoSex" value="${certificate.infoSex}"  readonly="readonly"/>
					</td>
				</tr>

				<tr>
					<td>身份证号:</td>
					<td><input type="text" name="infoCard" value="${certificate.infoCard} " placeholder="请输入您的身份证号" placeholder="请输入您的是否通过" readonly="readonly"/></td>
				</tr>

				<tr>
					<td>出生日期:</td>
				<%-- 	<td><input type="text" name="infoBirth" <fmt:formatDate value="${certificate.infoBirth}"pattern="yyyy-MM-dd "  placeholder="请输入您的是否通过" readonly="readonly"/></td> --%>
			<td><fmt:formatDate value="${certificate.infoBirth}" pattern="yyyy-MM-dd"/></td>
				</tr>

				<tr>
					<td>手机号码:</td>
					<td><input type="tel" name="infoPhone" value="${certificate.infoPhone}" maxlength="11" placeholder="请输入您的手机号码" readonly="readonly"/></td>
				</tr>

				<tr>
					<td>家庭住址:</td>
					<td><input type="text" name="infoAddress" value="${certificate.infoAddress}" placeholder="请输入您的家庭住址" readonly="readonly" /></td>
				</tr>

				<!--<tr>
					<td>成绩:</td>
					<td><input type="text" name="select1"  placeholder="请输入您的成绩" /></td>
				</tr>-->
				<tr>
					<td>考生成绩：</td>
					<td><input type="text" name="infoGrade" value="${certificate.infoGrade}" placeholder="请输入考生成绩" /></td>
				</tr>
				<tr>
					<!--<td>是否通过:</td>
					<td><input type="text" name="infoPass" value="${certificate.infoPass}" placeholder="请输入您的是否通过" /></td>-->
					<td><label for="email">是否通过：</label></td>
					<td>
						<input type="text" name="infoPass" value="${certificate.infoPass}" placeholder="请输入您的是否通过" /></td>
					</td>
				</tr>
				<tr>
					<td>认证状态：</td>
					<td><input type="text" name="infoStatus" value="${certificate.infoStatus}" placeholder="请输入认证状态" /></td>
				</tr>
				<tr>
					<td>认证评语:</td>
					<td><input type="text" name="infoRemark" value="${certificate.infoRemark}" placeholder="请输入您的评语"  /></td>
				</tr>
					<tr>
					<td>考生用户名:</td>
					<td><input type="text" name="infoExamUsername" value="${certificate.infoExamUsername}" placeholder="请输入您的考生用户名" readonly="readonly" /></td>
				</tr>
			<tr>
				<td>认证师用户名:</td>
				<td><input type="text" name="infoRzsUsername"
					value="${certificate.infoRzsUsername}" placeholder="请输入您的认证师用户名" /></td>
			</tr>
			<tr>
					<td>报考金额:</td>
					<td><input type="text" name="infoMoney" value="${certificate.infoMoney}" placeholder="请输入您的报考金额" readonly="readonly"/></td>
				</tr>
				<tr>
					<td>支付宝订单号:</td>
					<td><input type="text" name="infoZfbNumber" value="${certificate.infoZfbNumber}" placeholder="请输入您的支付宝订单号" readonly="readonly"  /></td>
				</tr>
				<tr> 
					<td>寸照:</td>
					<td><input type="text" name="infoImg" value="${certificate.infoImg}" placeholder="请输入您的寸照" readonly="readonly"/></td>
					<!--<td>
						<div id="imgPreview">
							<div id="prompt3">
								<span id="imgSpan"> 点击上传 <br /> <i
								class="aui-iconfont aui-icon-plus"></i> <!--AUI框架中的图标-->
							</span> <input type="file" id="file" class="filepath" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
								<!--当vaule值改变时执行changepic函数，规定上传的文件只能是图片-->
							</div>
							<img src="#" id="img3" />
						</div>
					</td>-->
				</tr>
				<td><input type="submit" name="btn1" id="update" value="修改" /></td>
			</table>
		</form>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var form = document.forms.form1;
			var select1 = form.infoGrade;
			var btn = form.btn1;
			btn.addEventListener("click", function() {
				if(select1.value == '0') {
					select1.setCustomValidity("请选择");
				} else {
					select1.setCustomValidity("");
				}
			});
			select1.addEventListener("change", function() {
				if(select1.value == '0') {
					form.infoStatus.value = '';
					form.infoPass.value = '';
				} else {
					if(select1.value >= 60 && select1.value<=100) {
						form.infoPass.value = '已通过';
						form.infoStatus.value = '已认证';
					} else if(select1.value <= 60 ) {
						form.infoPass.value = '未通过';
						form.infoStatus.value = '已认证';
					}
				}

			});
		}

		function changepic() {
			$("#prompt3").css("display", "none");
			var reads = new FileReader();
			f = document.getElementById('file').files[0];
			reads.readAsDataURL(f);
			reads.onload = function(e) {
				document.getElementById('img3').src = this.result;
				$("#img3").css("display", "block");
			};
		}
	</script>

</html>